<template>
  <view class="search_view">
    <view class="search_view_box">
      <uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入搜索商品" bgColor="#fff" clearButton="auto"
        cancelButton="none" v-model="value1" @confirm="search" />

      <view class="search_record">
        <view class="search_record_hd">
          <text class="history-tip">搜索历史</text>
          <uni-icons custom-prefix="custom-icon" type="trash" size="22" @click="removeSearch"></uni-icons>
        </view>
        <view class="search_record_bd" v-if="historyLts.length > 0">
          <text v-for="(item,index) in historyLts" v-bind:key="index" @click="itemGotoAllShop(item)">{{item}}</text>
        </view>
        <view class="search_record_bd" v-if="historyLts.length == 0">
         <text> 暂无历史搜索纪录……</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data(){
      return{
        value1:'',
        historyLts:[],
      }
    },
    mounted(){
      if(uni.getStorageSync('historyLts')){
        this.historyLts=uni.getStorageSync('historyLts').split(',');
      }
    },
    methods:{
      search(){
        console.log(this.value1);
        if(this.historyLts.indexOf(this.value1) == -1){
            this.historyLts.push(this.value1);
            uni.removeStorage('historyLts');
            uni.setStorageSync('historyLts', this.historyLts.join(','));
        }
        this.gotoAllShopView();
      },
      removeSearch(){
         uni.removeStorage('historyLts');
         this.historyLts=[];
      },
      gotoAllShopView() {
        uni.navigateTo({
          url: `/subpkg/all_shop/all_shop?name=${encodeURI(this.value1)}`
        })
      },
      itemGotoAllShop(item){
        this.value1=item;
        this.gotoAllShopView();
      }
    }
   
  }
</script>

<style lang="scss">
  body {
    background-color: #fff;
  }

  .search_view {
    .search_view_box {
      width: 700rpx;
      margin: 0 auto;
      padding: 0 20rpx;
      margin-top: 40rpx;

      .uni-searchbar {
        border: 2rpx solid #E1E1E1;
        border-radius: 20px;
        padding: 4px;
      }
    }

    .search_record {
      width: 100%;
      overflow: hidden;
      margin-top: 40rpx;

      .search_record_hd {
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0rpx;

        .history-tip {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }

      }

      .search_record_bd {
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: start;

        text {
          background: #F2F2F2;
          border-radius: 6rpx;
          padding: 10rpx 20rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-right: 10rpx;
        }
      }
    }
  }
</style>
